<template>
  <div class="customer">

    <el-row style="padding: 20px 0;">
      <el-col :span="24">

        <el-button type="primary"
                   @click="add()">新增商品</el-button>

      </el-col>
      <el-form :inline="true"
               :model="formInline"
               class="demo-form-inline"
               label-width="100px"
               style="margin-top: 80px;">
        <el-form-item label="商品名称:">

          <!-- <el-input v-model="formInline.goodName"
                    style="width: 150px;"
                    :maxlength="50"></el-input> -->
        </el-form-item>
        <!--  <el-form-item label="按状态：">
                        <el-select v-model="formInline.goodState" style="width: 120px;" >
                            <el-option label="全部" value=""></el-option>
                            <el-option label="已上架" value="2" ></el-option>
                            <el-option label="已下架" value="3" ></el-option>
                        </el-select>
                    </el-form-item> -->
        <!-- <el-form-item label="按分类：">
          <el-select v-model="formInline.goodOneCate"
                     style="width: 150px;"
                     @change="selectSort2()"
                     placeholder="一级分类">
            <el-option label="全部"
                       value=""></el-option>
            <el-option :label="item.cateName"
                       :value="item.cateId"
                       v-for="item in sortList"></el-option>
          </el-select>
          <el-select v-model="formInline.goodTwoCate"
                     style="width: 150px;"
                     placeholder="二级分类"
                     v-if="formInline.goodOneCate">
            <el-option label="全部"
                       value=""></el-option>
            <el-option :label="item.cateName"
                       :value="item.cateId"
                       v-for="item in secondList"></el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="是否启用优惠价："
                      label-width="130px">
          <el-select v-model="formInline.goodIsDiscount"
                     style="width: 120px;">
            <el-option label="全部"
                       value=""></el-option>
            <el-option label="已启用"
                       value="1"></el-option>
            <el-option label="未启用"
                       value="2"></el-option>
          </el-select>
        </el-form-item> -->
        <el-button type="primary"
                   @click="fetchData(1)">查询</el-button>

      </el-form>
    </el-row>
    <!-- 这里一个报错 -->
    <el-table v-if="false"
              :data="pageInfo.dtos"
              v-loading="table_loading"
              element-table_loading-text="加载中"
              stripe
              @sort-change='order'
              style="width: 100%">
      <el-table-column type="index"
                       label="序号">
      </el-table-column>
      <el-table-column width="215"
                       label="商品">
        <template scope="scope">
          <div style="display: inline-block;">
            <img class="banner"
                 :src="scope.row.goodCover"
                 style="width:55px;">
          </div>
          <div style="display: inline-block;width: 120px;vertical-align: middle;padding: 10px;">{{scope.row.goodName}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="DIS_PRICE"
                       label="分类">
        <template scope="scope">
          <span>{{ scope.row.goodOneCateName }} - {{ scope.row.goodTwoCateName }}</span>
        </template>
      </el-table-column>
      <!--             <el-table-column
                    label="排序值"
                    prop="room_Sort"
                    width="115"
                    sortable='custom'>
                    <template scope="scope">
                        <el-input  v-model="scope.row.roomSort" style="width:50px;" @blur="editOrder(scope.row,$event)" @focus="setOldProbability(scope.row)"></el-input>
                    </template>
            </el-table-column> -->
      <el-table-column prop="good_Price"
                       sortable='custom'
                       label="起售价（元）">
        <template scope="scope">
          <span>{{ scope.row.goodPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="T1.good_Discount_Price"
                       label="优惠价（元）">
        <template scope="scope">
          <span v-if="scope.row.goodIsDiscount==1">{{ scope.row.goodDiscountPrice }}</span>
          <span v-else>未启用</span>
        </template>
      </el-table-column>
      <el-table-column prop="good_Ratio"
                       label="补贴比例">
        <template scope="scope">
          <span>{{ scope.row.goodRatio*100 }}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="sales"
                       label="销量">
      </el-table-column>
      <el-table-column prop="stock"
                       label="库存">
      </el-table-column>
      <el-table-column prop="cre_Time"
                       sortable='custom'
                       label="上架时间">
        <template scope="scope">
          <span>{{scope.row.creTime}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="stock"
                       label="评价">
        <template scope="scope">
          <el-button type="primary"
                     size="small"
                     @click="check(scope.row.goodId)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       width="140">
        <template scope="scope">

          <el-button type="primary"
                     size="small"
                     @click="edit(scope.row.goodId)">编辑</el-button>
          <el-button type="danger"
                     size="small"
                     @click="handleDelete(scope.row,'下架')">下架
          </el-button>
          <!--    <el-button type="success" size="small" v-else
                               @click="handleDelete(scope.row,'上架')">上架
                    </el-button>  -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 这里一个报错 -->
    <div class="paginate">
      <!-- 分页组件使用问题 -->
      <!-- <el-pagination layout="prev, pager, next"
                     :total="50">
      </el-pagination> -->
      <el-pagination @current-change="handleCurrentChange"
                     :current-page.sync="pageInfo.pageNum"
                     :page-size="pageInfo.pageSize"
                     layout="total, prev, pager, next"
                     :total="pageInfo.count">
      </el-pagination>
    </div>

    <el-dialog title="查看评价"
               v-model="dialogVisible"
               size="large">
      <el-table :data="pageInfo2.dtos"
                element-table_loading-text="加载中"
                stripe
                v-loading="table_loading2"
                style="width: 100%">
        <!--                 <el-table-column
                        prop="userId"
                        label="买家">
                </el-table-column> -->
        <el-table-column label="用户名"
                         prop="userName">
        </el-table-column>
        <el-table-column label="星级评分"
                         prop="userName">
          <template scope="scope">
            <span>{{ scope.row.evaluateStar }}星</span>
          </template>
        </el-table-column>
        <el-table-column label="评价内容"
                         prop="evaluateContent">
        </el-table-column>
        <el-table-column label="图片"
                         prop="territorial_Limit">
          <template scope="scope">
            <img :src="item"
                 alt=""
                 v-for="item in scope.row.evaluateImage"
                 class="img-preview"
                 @click="previewImage(item)"
                 style="margin-right: 10px;width:60px;height: 60px;">
            <span v-if="scope.row.evaluateImage==''">无</span>
          </template>
        </el-table-column>
        <el-table-column label="评价时间"
                         prop="evaluateTime">
        </el-table-column>
      </el-table>
      <div class="paginate">
        <el-pagination @current-change="handleCurrentChange2"
                       :current-page.sync="pageInfo2.pageNum"
                       :page-size="pageInfo2.pageSize"
                       layout="total, prev, pager, next"
                       :total="pageInfo2.count">
        </el-pagination>
      </div>

    </el-dialog>

    <div class="weui-gallery"
         style="display: block;z-index: 9999;"
         v-show="img.is_preview">
      <span class="weui-gallery__img"
            :style="{backgroundImage:img.preview_url,transform:img.transform}"
            @click="hidePreview"></span>
      <div class="weui-gallery__opr white_pointer">
        <div class="weui-gallery__del"
             @click.prevent="rotate()">
          <img src="../../assets/images/xuanzhuan.png"
               height="25"
               width="25">
          <span class="weui-span_del">旋转</span>
        </div>
      </div>
    </div>
  </div>

</template>
<style>
</style>
<script>
export default {
  data () {
    return {
      title: '用户列表',
      table_loading: false,
      table_loading2: false,
      formInline: {
        goodsName: '',
        goodOneCate: '',
        goodTwoCate: '',
        goodState: '2',
        storeId: '',
        pageNum: 1,
        pageSize: 10,
        sort: 'T1.CRE_TIME',
        desc: 'DESC',
        goodIsDiscount: ''
      },
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
        count: 1,
        dtos: []
      },
      pageInfo2: {
        pageNum: 1,
        pageSize: 5,
        count: 1,
        dtos: []
      },
      formLabelWidth: '120px',
      sortList: [],
      secondList: [],
      showSort: false,
      storeId: '',
      dialogVisible: false,
      id: '',
      img: {
        is_preview: false,
        preview_url: '',
        image_index: null,
        preview_images: [],
        transform: ''
      }

    }
  },
	created() {
		this.fetchData(this.pageInfo.pageNum);
		this.selectSort()
	},
  // watch:{
  //     'formInline.name'(val,oldVal) {
  //         //console.log(val)
  //         this.formInline[this.formInline.type] = this.formInline.name
  //     }
  // },
  methods: {
    fetchData (page = 1) {
      this.table_loading = true;
      this.pageInfo.pageNum = page
      this.formInline.pageNum = this.pageInfo.pageNum
      this.dataApi.ajax('selectPageStoreGood', this.formInline, res => {
        this.table_loading = false;
        if (res.responseType === 'S') {
          this.pageInfo = res
        }
      });


    },

    handleCurrentChange (val) {
      this.fetchData(val)
    },
    handleCurrentChange2 (val) {
      this.fetchData2(val)
    },
    edit (id) {
      this.$router.push('/mall/add_goods/' + id)
    },
    setOldProbability (item) {
      item.OldProbability = item.roomSort
    },
    editOrder (item) {
      if (Math.floor(item.roomSort) <= 0) {
        item.roomSort = item.OldProbability || 0;
        return false;
      }
      if (item.OldProbability == item.roomSort) return false;
      if (!isNumber(item.roomSort)) {
        this.showMsg('只能输入数字', 'warning')
        item.roomSort = item.OldProbability
        return false;
      }
      this.dataApi.ajax('editStoreGood', {
        storeGoodDto: {
          goodId: item.goodId,
          roomSort: item.roomSort
        }
      }, res => {
        if (res.responseType === 'S') {
          this.showMsg('修改成功')
          this.fetchData(this.pageInfo.pageNum)
        }
      });
    },
    handleDelete (item, type) {
      var state = ''
      if (item.goodState == 2) {
        state = 3
      } else {
        state = 2
      }

      this.$confirm('确认' + type + '?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dataApi.ajax('editStoreGood', {
          storeGoodDto: {
            goodId: item.goodId,
            goodState: state
          }
        }, res => {
          if (res.responseType === 'S') {
            this.showMsg(type + '成功!')
            this.fetchData(this.pageInfo.pageNum)
          }
        });
      }).catch(() => {

      });
    },
    order (column) {
      if (!column.order) {
        return;
      }
      if (column.order == 'ascending') {
        this.formInline.desc = 'ASC'
      } else {
        this.formInline.desc = 'DESC'
      }
      this.formInline.sort = column.prop.toUpperCase()
      this.fetchData(this.pageInfo.pageNum)
    },
    add () {
      sessionStorage.removeItem('addBasic')
      sessionStorage.removeItem('addBasic_s')
      this.$router.push('/mall/add_goods/0')
    },
    selectSort () {
      this.dataApi.ajax('selectGoodCate', { cateState: '1' }, res => {
        //console.log(res)
        if (res.responseType === 'S') {
          this.sortList = res.dtos
          console.log(this.sortList, '1')
        }
      });

    },
    selectSort2 () {
      this.formInline.goodTwoCate = ''
      this.dataApi.ajax('selectGoodCate', { cateId: this.formInline.goodOneCate, cateState: '1' }, res => {
        //console.log(res)
        if (res.responseType === 'S') {
          this.secondList = res.dtos
        }
      });

    },
    check (id) {
      this.id = id
      this.fetchData2(1)
      this.dialogVisible = true
    },
    fetchData2 (page = 1) {
      this.table_loading2 = true;
      this.pageInfo2.pageNum = page
      this.dataApi.ajax('selectPageShopEvaluat', {
        pageNum: this.pageInfo2.pageNum,
        pageSize: this.pageInfo2.pageSize,
        sort: 'T1.CRE_TIME',
        desc: 'DESC',
        goodId: this.id,
        evaluateType: 1
      }, res => {
        this.table_loading2 = false;
        if (res.responseType === 'S') {
          this.pageInfo2 = res
        }
      });


    },
    previewImage (src) {
      this.img.is_preview = true;
      this.img.preview_url = `url(${src})`;
      this.img.preview_images = this.images;
      this.img.transform = '';
    },
    hidePreview () {
      this.img.is_preview = false;
      this.img.preview_url = null;
      this.img.image_index = null;
      this.img.preview_images = [];
      this.img.transform = '';
    },
    rotate () {
      if (this.img.transform == '') {
        this.img.transform = 'rotate(90deg)'
      } else if (this.img.transform == 'rotate(90deg)') {
        this.img.transform = 'rotate(180deg)'
      } else if (this.img.transform == 'rotate(180deg)') {
        this.img.transform = 'rotate(270deg)'
      } else if (this.img.transform == 'rotate(270deg)') {
        this.img.transform = ''
      }
    }

  }
}
</script>
